<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px">
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="listQuery.fequipmentname" clearable class="filter-item" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备分类">
              <el-select v-model="listQuery.fclassstno" filterable clearable class="filter-item" placeholder="请选择设备分类">
                <el-option v-for="item in getListfclassstno" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备类型">
              <el-select v-model="listQuery.fequipmenttype" filterable clearable class="filter-item" placeholder="请选择设备类型">
                <el-option v-for="item in getListfequipmenttype" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="handleFilter">查找</el-button>
              <el-button type="success"  @click="handleCreate">添加</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
      <!-- 查询结果 -->
        <JNPF-table  v-loading="listLoading" :data="list" @row-click="rowclick">
          <el-table-column align="center" :width="buttonColor.operationThree" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">预约</el-dropdown-item>
                  <el-dropdown-item command="b">指令</el-dropdown-item>
                  <el-dropdown-item command="c">参数</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
          <el-table-column align="left" label="设备编号" prop="fequipmentno" />
          <el-table-column align="left" label="设备名称" prop="fequipmentname" />
          <el-table-column :formatter="formatfequipmenttype" align="left" label="设备类型" prop="fequipmenttype" />
          <el-table-column :formatter="formatfclassstno" align="left" label="设备分类" prop="fclassstno" />
          <el-table-column align="left" label="品牌" prop="fbrand" />
          <el-table-column align="left" label="型号" prop="fspec" />
          <el-table-column width="80" align="left" label="单位" prop="funit" />
          <el-table-column width="80" align="left" label="使用年限" prop="fuseyear" />
        </JNPF-table>
        <paginations
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          />
      </div>
    </div>
    <el-dialog
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :title="textMap[dialogStatus]"
    >
     <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" ref="dataForm" :model="dataForm" :rules="rules">
          <el-col :span="8">
            <el-form-item class="required" label="设备编号" prop="fequipmentno">
              <el-input v-model.number="dataForm.fequipmentno" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="设备类型" prop="fequipmenttype">
              <el-select style="width:100%" @change="fdictnoChange" v-model="dataForm.fequipmenttype" filterable
                clearable class="filter-item" placeholder="请选择设备类型">
                <el-option v-for="item in getListfequipmenttype" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="设备分类" prop="fclassstno">
              <el-select style="width:100%" v-model="dataForm.fclassstno" filterable clearable class="filter-item"
                placeholder="请选择设备分类">
                <el-option v-for="item in getListfclassstno" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="设备名称" prop="fequipmentname">
              <el-input v-model="dataForm.fequipmentname" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="控制面板" prop="fpanel">
              <el-select v-model="dataForm.fpanel" clearable filterable class="filter-item" placeholder="请选择控制面板"
                style="width:100%">
                <el-option v-for="item in siteTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="fspec">
              <el-input v-model="dataForm.fspec" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="使用年限" prop="fuseyear">
              <el-input v-model="dataForm.fuseyear" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="funit">
              <el-input v-model="dataForm.funit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌" prop="fbrand">
              <el-input v-model="dataForm.fbrand" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备条码" prop="fbarcode">
              <el-input v-model="dataForm.fbarcode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最低电压" prop="flowvoltage">
              <el-input v-model="dataForm.flowvoltage" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最高电压" prop="fheightvoltage">
              <el-input v-model="dataForm.fheightvoltage" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购周期" prop="fordday">
              <el-input v-model="dataForm.fordday" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电流" prop="felccurrent">
              <el-input v-model="dataForm.felccurrent" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="重量" prop="netWeight">
              <el-input v-model="dataForm.netWeight" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片" prop="fimage">
              <el-upload v-model="dataForm.fimage" :show-file-list="false" :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload" :action="uploadPath" :data="formdata2(dataForm.feuipmentid)"
                class="avatar-uploader">
                <img v-if="dataForm.fimage" :src="dataForm.fimage" class="avatar" style="width:60px;height:60px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size:9px"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()" type="info">取消</el-button>
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData"
          >确定</el-button
        >
        <el-button v-else @click="updateData" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 指令添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :fullscreen="true"
      :visible.sync="dialogFormVisibleInstruction"
      :before-close="handleCloseInstruction"
      :title="textMap[dialogStatus]"
    >
    <el-tabs type="border-card">
      <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
        <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px"  ref="dataForm" :rules="rules" :model="dataForm">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="fequipmentno">
              <el-input disabled v-model.number="dataForm.fequipmentno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="fequipmenttype">
              <el-select disabled style="width:100%" @change="fdictnoChange" v-model="dataForm.fequipmenttype"
                filterable clearable class="filter-item" placeholder="请选择设备类型">
                <el-option v-for="item in getListfequipmenttype" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="fequipmentname">
              <el-input disabled v-model="dataForm.fequipmentname" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="fspec">
              <el-input disabled v-model="dataForm.fspec" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      </el-tab-pane>
      <el-tab-pane label="明细表">
        <JNPF-table v-loading="listLoading" :data="dataForm.detailList" :height="screenHeight-230">
          <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
          <el-table-column align="center" label="控制指令" prop="faction">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.faction" 
              v-direction="{ x: 0, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column width="180" align="center" label="指令描述" prop="fdescribe">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fdescribe" 
              v-direction="{ x: 1, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column width="280" align="center" label="设备指令" prop="finstructions">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.finstructions" 
              v-direction="{ x: 2, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="设备标识" prop="fmark">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fmark" 
              v-direction="{ x: 3, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="数字属性" prop="fnumflag">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fnumflag" 
              v-direction="{ x: 4, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="最低值" prop="fbegnum">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fbegnum" 
              v-direction="{ x: 5, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="最高值" prop="fendnum">
            <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fendnum" 
              v-direction="{ x: 6, y: scope.$index,type:1}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" width="140" label="操作" class-name="small-padding">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit1(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete1(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
      </el-tab-pane>
    </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseInstruction()" type="info">取消</el-button>
        <el-button @click="updateDataInstruction" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <!-- 参数添加或修改对话框 -->
    <el-dialog
      :fullscreen="true"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisibleParameter"
      :before-close="handleCloseParameter"
      :title="textMap[dialogStatus]"
    >
    <el-tabs type="border-card">
      <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
        <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" ref="dataFormParameter" :model="dataForm" :rules="rules">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="fequipmentno">
              <el-input disabled v-model.number="dataForm.fequipmentno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="fequipmenttype">
              <el-select disabled style="width:100%" @change="fdictnoChange" v-model="dataForm.fequipmenttype"
                filterable clearable class="filter-item" placeholder="请选择设备类型">
                <el-option v-for="item in getListfequipmenttype" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="fequipmentname">
              <el-input disabled v-model="dataForm.fequipmentname" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="fspec">
              <el-input disabled v-model="dataForm.fspec" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      </el-tab-pane>
      <el-tab-pane label="明细表">
        <JNPF-table v-loading="listLoading" :data="dataForm.paraList" :height="screenHeight-230">
          <el-table-column :width="buttonColor.line" align="center" label="行号" prop="fline" />
          <el-table-column align="center" label="参数字段" prop="fparadict">
             <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fparadict" 
              v-direction="{ x: 0, y: scope.$index,type:2}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="参数描述" prop="fparaname">
             <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fparaname" 
              v-direction="{ x: 1, y: scope.$index,type:2}"
            >
            </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="参数类型" prop="fparatype">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fparatype" clearable filterable class="filter-item" placeholder="参数类型">
            <el-option v-for="item in fparatypeTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" width="140" label="操作" class-name="small-padding">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDelete2(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
      </el-tab-pane>
    </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseParameter()" type="info">取消</el-button>
        <el-button @click="updateDataParameter" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <!-- 预约 -->
    <el-dialog
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisibleOrder"
      :before-close="handleClose"
      :title="textMap[dialogStatus]"
    >
    <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" ref="dataFormOrder" :model="dataForm" :rules="rules1">
          <el-col :span="12">
            <el-form-item class="required" label="设备编号" prop="fequipmentno">
              <el-input disabled v-model.number="dataForm.fequipmentno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="required" label="设备类型" prop="fequipmenttype">
              <el-select disabled style="width:100%" @change="fdictnoChange" v-model="dataForm.fequipmenttype"
                filterable clearable class="filter-item" placeholder="请选择设备类型">
                <el-option v-for="item in getListfequipmenttype" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="required" label="设备名称" prop="fequipmentname">
              <el-input disabled v-model="dataForm.fequipmentname" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="required" label="型号" prop="fspec">
              <el-input disabled v-model="dataForm.fspec" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费方式" prop="fcharge">
              <el-select v-model="dataForm.fcharge" clearable filterable>
                <el-option v-for="item in fchargeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费标准" prop="fchargeprice">
              <el-input v-model="dataForm.fchargeprice" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleOrder=false" type="info">取消</el-button>
        <el-button  @click="updateDataOrder" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import { listinfo, createinfo, updateinfo, deleteinfo, saveEquipmentCodes3,areagitlist } from '@/api/info'
import { uploadPath } from '@/api/room'
import { getListArea, eqtActions } from '@/api/area'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor, titleColor, buttonColor } from '@/filters/index'

const siteTypeMap = {
  0: '否',
  1: '是'
}
const fparatypeTypeMap = {
  0: 'int',
  1: 'char'
}
export default {
  name: 'STsEquipmentInfo',
  components: { Pagination },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type]
    },
    fparatypeTypeFilter(type) {
      return fparatypeTypeMap[type]
    }
  },
  data() {
    return {
      fchargeOptions: [], // 收费方式
      isAdd1: true,
      screenHeight: document.body.clientHeight,
      isAdd2: true,
      buttonColor: buttonColor,
      uploadPath,
      isActive: true,
      getListfaction: [],
      getListfclassstno: [],
      getListfequipmenttype: [],
      detailsTmp: [],
      parasTmp: [],
      listTmp: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fequipmentno: undefined,
        fequipmentname: undefined,
        fclassstno: undefined,
        funit: undefined,
        fbrand: undefined,
        fspec: undefined,
        fuseyear: undefined,
        fimage: undefined,
        fequipmenttype: undefined,
        fpanel: undefined,
        fbarcode: undefined,
        fbuyprice: undefined,
        fupddate: undefined,
        foperator: undefined,
        flowvoltage: undefined,
        fheightvoltage: undefined,
        felccurrent: undefined,
        fordday: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      siteTypeList: [
        { value: 0, label: '普通' },
        { value: 1, label: '红外' },
        { value: 2, label: '空开' },
        { value: 3, label: '窗帘' },
        { value: 4, label: 'SNE空气净化器' },
        { value: 5, label: '电脑远程开关' },
        { value: 6, label: '护眼灯' },
      ],
      fparatypeTypeList: [
        { value: 0, label: 'int' },
        { value: 1, label: 'char' }
      ],
      dataForm: {
        fequipmentno: undefined,
        fequipmentname: undefined,
        fclassstno: undefined,
        funit: undefined,
        fbrand: undefined,
        fspec: undefined,
        fuseyear: undefined,
        fimage: undefined,
        fequipmenttype: undefined,
        fpanel: undefined,
        fbarcode: undefined,
        fbuyprice: undefined,
        fupddate: undefined,
        foperator: undefined,
        flowvoltage: undefined,
        fheightvoltage: undefined,
        felccurrent: undefined,
        fordday: undefined,
        fpointno: undefined,
        id: undefined,
        fcharge: undefined,
        fchargeprice: undefined,
        detailList: [],
        paraList: [],
        netWeight: '',
      },
      dataForm1: {
        faction: undefined,
        fdescribe: undefined,
        finstructions: undefined,
        fmark: undefined,
        fnumflag: undefined,
        fbegnum: undefined,
        fendnum: undefined,
      },
      dataForm2: {
        fline: undefined,
        fparaname: undefined,
        fparatype: undefined,

      },
      rowdata:{},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisibleInstruction: false, // 指令
      dialogFormVisibleParameter: false, // 参数
      dialogFormVisibleOrder: false, // 预约
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建',
        yu:"预约",
        zl:"指令",
        cs:"参数"
      },
      tableColor: tableColor,
      titleColor: titleColor,
      rules: {
        fequipmentno: [
          { required: true, message: '设备编号不能为空' },
          {
            type: 'number',
            message: '设备编号必须为数字值',
            transform: (value) => Number(value)
          }],
        fequipmentname: [{ required: true, message: '设备名称不能为空' }],
        fclassstno: [{ required: true, message: '分类编号不能为空' }],
        funit: [],
        fbrand: [],
        fspec: [],
        fuseyear: [
          {
            type: 'number',
            message: '使用年限必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fimage: [],
        fequipmenttype: [
          { required: true, message: '设备类型不能为空' },
          {
            type: 'number',
            message: '设备类型必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fpanel: [
          { required: true, message: '控制面板不能为空' },
          {
            type: 'number',
            message: '控制面板必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fbarcode: [],
        fbuyprice: [],
        fupddate: [],
        foperator: []
      },
      rules1: {
        feuipmentid: [
          { required: true, message: '设备编号不能为空' },
          {
            type: 'number',
            message: '设备编号必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        faction: [{ required: true, message: '控制指令不能为空' }],
        fdescribe: [{ required: true, message: '指令描述不能为空' }],
        finstructions: [{ required: true, message: '设备指令不能为空' }],
        fmark: [{ required: true, message: '设备标识不能为空' }],
        fnumflag: [
          {
            type: 'number',
            message: '数字属性必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fbegnum: [
          {
            type: 'number',
            message: '最低值必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fendnum: [
          {
            type: 'number',
            message: '最高值必须为数字值',
            transform: (value) => Number(value)
          }
        ]
      },
      rules2: {
        feuipmentid: [
          { required: true, message: '设备编号不能为空' },
          {
            type: 'number',
            message: '设备编号必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fline: [
          { required: true, message: '行号不能为空' },
          {
            type: 'number',
            message: '行号必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fparatype: [
          {
            type: 'number',
            message: '参数类型:必须为数字值',
            transform: (value) => Number(value)
          }
        ]
      }
    }
  },
  created() {
    this.keyCode();
    this.panelHeight = document.documentElement.clientHeight - 420
    //获取控制面板list
    this.getarealist()
    this.getList()
    getListArea({ flag: 2 })
      .then(response => {
        this.getListfclassstno = response.data.data.list
      })
      .catch(() => {
        this.getListfclassstno = []
      })

    getListArea({ flag: 1 })
      .then(response => {
        this.getListfequipmenttype = response.data.data.list
      })
      .catch(() => {
        this.getListfequipmenttype = []
      })
    this.fchargeOptions = [
      {
        value: 1, label: '小时'
      },
      {
        value: 2, label: '次数'
      },
    ]
  },
  methods: {
    //回车
    keyCode() {
      let direction = this.$getDirection();
      let _this=this;
      direction.on("keyup", function (e, val) {
        if (e.keyCode === 13) {
          if(val.type==1)
          {
            if(val.y==_this.dataForm.detailList.length-1)
            {
              _this.addrow(res=>{
                direction.next();
              })
            }
            else
            {
              direction.next();
            }
          }
          else
          {
            if(val.y==_this.dataForm.paraList.length-1)
            {
              _this.addrow2(res=>{
                direction.next();
              })
            }
            else
            {
              console.log(2)
               direction.next();
            }
          }
        }
        if (e.keyCode === 37) {
          direction.previous();
        }
        if (e.keyCode === 38) {
          direction.previousLine();
        }
        if (e.keyCode === 40) {
          direction.nextLine();
        }
        if (e.keyCode == 39) {
          direction.next();
        }
      });
    },
    //添加行
    addrow(callback){
      this.dataForm.detailList.push({
        faction:""
        ,fdescribe:""
        ,finstructions:""
        ,fmark:""
        ,fnumflag:""
        ,fbegnum:""
        ,fendnum:""
      })
      setTimeout(()=>{
      callback(200)
      },300)
    },
    //添加行
    addrow2(callback){
      this.dataForm.paraList.push({
        fline:this.dataForm.paraList.length+1,
        fparadict:"",
        fparaname:"",
        fparatype:""
      })
      setTimeout(()=>{
      callback(200)
      },300)
    },
    handleCommand(e){
      if(e=="a")
      {
       this.order(this.rowdata) 
      }
      if(e=="b")
      {
        this.instruction(this.rowdata) 
      }
      if(e=="c")
      {
        this.parameter(this.rowdata) 
      }
    },
    rowclick(e){this.rowdata=e;},
    //获取控制面板
    getarealist(){
      areagitlist({ flag: 34, arg1:3013})
      .then(response => {
        var responsedata = JSON.parse(JSON.stringify(response.data.data.list))
        for(var i in responsedata){
          responsedata[i].value = Number(responsedata[i].value)
        }
        this.siteTypeList = responsedata
      })
      .catch(() => {
        this.siteTypeList = []
      })
    },
    // 预约
    order(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'yu'
      this.dialogFormVisibleOrder = true
    },
    // 指令
    instruction(row) {
      this.dataForm = Object.assign({}, row)
      this.dataForm.detailList.push({
        faction:""
        ,fdescribe:""
        ,finstructions:""
        ,fmark:""
        ,fnumflag:""
        ,fbegnum:""
        ,fendnum:""
      })
      this.dialogStatus = 'zl'
      eqtActions(row.fequipmenttype)
        .then(response => {
          this.getListfaction = response.data.data.list
        })
        .catch(() => {
          this.getListfaction = []
        })

      this.detailsTmp = []
      this.listTmp = row
      row.detailList.forEach((v) => {
        this.detailsTmp.push(v)
      })
      this.dialogFormVisibleInstruction = true
    },
    // 指令添加
    updateDataInstruction() {
      this.$refs['dataFormInstruction'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updateinfo(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.feuipmentid === this.dataForm.feuipmentid) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisibleInstruction = false
              this.$notify.success({
                title: '成功',
                message: '更新指令成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    // 参数
    parameter(row) {
      this.dataForm = Object.assign({}, row)
      this.dataForm.paraList.push({
        fline:this.dataForm.paraList.length+1,
        fparadict:"",
        fparaname:"",
        fparatype:""
      })
      this.dialogStatus = 'cs'
      this.listTmp = row
      this.parasTmp = []
      row.paraList.forEach((v) => {
        this.parasTmp.push(v)
      })
      this.dialogFormVisibleParameter = true
    },
    updateDataParameter() {
      this.$refs['dataFormParameter'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updateinfo(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.feuipmentid === this.dataForm.feuipmentid) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisibleParameter = false
              this.$notify.success({
                title: '成功',
                message: '更新参数成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    test(fequipmentno) {
      if (fequipmentno != undefined && fequipmentno != '') {
        this.isActive = false;
      }
      else {
        this.isActive = true;
        this.$notify.error({
          title: "失败",
          message: '请先输入设备编号',
        });
      }
    },
    handleRemove() { },
    formatfclassstno: function (row, column) {
      if (this.getListfclassstno.length > 0) {
        for (let i = 0; i < this.getListfclassstno.length; i++) {
          if (row.fclassstno === this.getListfclassstno[i].value) {
            return this.getListfclassstno[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    formatfequipmenttype: function (row, column) {
      if (this.getListfequipmenttype.length > 0) {
        for (let i = 0; i < this.getListfequipmenttype.length; i++) {
          if (row.fequipmenttype === this.getListfequipmenttype[i].value) {
            return this.getListfequipmenttype[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    formatfequipmenttype2: function (fequipmenttype) {
      if (this.getListfequipmenttype.length > 0) {
        for (let i = 0; i < this.getListfequipmenttype.length; i++) {
          if (fequipmenttype === this.getListfequipmenttype[i].value) {
            return this.getListfequipmenttype[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    formatfaction: function (row, column) {
      if (this.getListfaction.length > 0) {
        for (let i = 0; i < this.getListfaction.length; i++) {
          if (row === this.getListfaction[i].label) {
            return this.getListfaction[i].value
          }
        }
        return ''
      } else {
        return ''
      }
    },

    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 设备类型改变
    fdictnoChange(data) {
      this.dataForm1.faction = ''
      if (data) {
        // 获取控制指令
        eqtActions(data)
          .then(response => {
            this.getListfaction = response.data.data.list
          })
          .catch(() => {
            this.getListfaction = []
          })
      }
    },
    // 控制指令改变
    factionChange(data) {
      this.dataForm1.faction = this.formatfaction(data)
    },
    resetForm1() {
      this.dataForm1 = {
        faction: undefined,
        fdescribe: undefined,
        finstructions: undefined,
        fmark: undefined,
        fnumflag: undefined,
        fbegnum: undefined,
        fendnum: undefined,
      }
    },
    resetForm2() {
      this.dataForm2 = {
        fline: undefined,
        fparaname: undefined,
        fparatype: undefined,
      }
    },
    getList() {
      this.listLoading = true
      listinfo(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleUpdate1() {
      this.dialogFormVisible1 = true
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });
    },

    // 子表一添加编辑
    handleEdit1(row) {
      this.dialogFormVisible1 = true
      this.dataForm1 = Object.assign({}, row);
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });

    },
    // 子表一编辑保存数据
    editData1() {
      this.$refs["dataForm1"].validate((valid) => {
        if (valid) {
          if (this.dataForm.detailList.length > 0) {
            // 子表编辑
            for (const v of this.dataForm.detailList) {
              if (v.faction === this.dataForm1.faction && v.fmark === this.dataForm1.fmark) {
                const index = this.dataForm.detailList.indexOf(v);
                this.dataForm.detailList.splice(index, 1, this.dataForm1);
                this.isAdd1 = false
                break;
              }
            }
            // 子表添加
            if (this.isAdd1) {
              this.dataForm.detailList.push(this.dataForm1);
            }
          } else {
            // 子表第一次添加
            this.dataForm.detailList.push(this.dataForm1);
          }
          this.resetForm1()
          this.isAdd1 = true
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
          this.dialogFormVisible1 = false
        }
      });
    },

    // 子表一取消
    cancle1() {
      this.dialogFormVisible1 = false
      this.resetForm1()
      this.isAdd1 = true
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });
    },

    // 子表一删除
    handleDelete1(row) {
      const index = this.dataForm.detailList.indexOf(row);
      this.dataForm.detailList.splice(index, 1);
      this.resetForm1()
    },

    // 子表二
    handleUpdate2() {
      this.dialogFormVisible2 = true
      this.dataForm2 = {
        fline: undefined,
        fparaname: undefined,
        fparatype: undefined,
      };
      if (this.dataForm.paraList.length > 0) {
        // 计算行号
        let len = this.dataForm.paraList.length - 1
        this.indexs = this.dataForm.paraList[len].fline + 1
        this.dataForm2.fline = this.dataForm.paraList[len].fline + 1
      } else {
        this.indexs = 1
        this.dataForm2.fline = 1
      }
      this.$nextTick(() => {
        this.$refs["dataForm2"].clearValidate();
      });
    },

    // 子表一添加编辑
    handleEdit2(row) {
      this.dataForm2 = Object.assign({}, row);
      this.dialogFormVisible2 = true
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm2"].clearValidate();
      });
    },
    // 子表一编辑保存数据
    editData2() {
      this.$refs["dataForm2"].validate((valid) => {
        if (valid) {
          if (this.dataForm.paraList.length > 0) {
            for (const v of this.dataForm.paraList) {
              if (v.fline === this.dataForm2.fline) {
                const index = this.dataForm.paraList.indexOf(v);
                this.dataForm.paraList.splice(index, 1, this.dataForm2);
                this.isAdd2 = false
                break;
              }
            }
            if (this.isAdd2) {
              this.dataForm.paraList.push(this.dataForm2);
            }
          } else {
            this.dataForm.paraList.push(this.dataForm2);
          }
          this.resetForm2()
          this.isAdd2 = true
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm2"].clearValidate();
          });
          // 计算行号
          if (this.dataForm.paraList.length > 0) {
            let len = this.dataForm.paraList.length - 1
            this.dataForm2.fline = this.dataForm.paraList[len].fline + 1
          } else {
            this.dataForm2.fline = 1
          }
          this.dialogFormVisible2 = false
        }
      });
    },
    updateDataOrder() {
      this.$refs['dataFormOrder'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updateinfo(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.feuipmentid === this.dataForm.feuipmentid) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisibleOrder = false
              this.$notify.success({
                title: '成功',
                message: '更新预约资料成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },

    cancle2() {
      this.resetForm2()
      this.isAdd2 = true

      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm2"].clearValidate();
      });

      // 计算行号
      if (this.dataForm.paraList.length > 0) {
        let len = this.dataForm.paraList.length - 1
        this.dataForm2.fline = this.dataForm.paraList[len].fline + 1
      } else {
        this.dataForm2.fline = 1
      }
      this.dialogFormVisible2 = false
    },

    handleDelete2(row) {
      const index = this.dataForm.paraList.indexOf(row);
      this.dataForm.paraList.splice(index, 1);
      if (this.dataForm.paraList.length > 0) {
        let len = this.dataForm.paraList.length - 1
        this.dataForm2.fline = this.dataForm.paraList[len].fline + 1
      } else {
        this.dataForm2.fline = 1
      }
    },


    // 弹窗点击关闭前的回调
    handleCloseInstruction() {
      this.indexs = 1
      this.dialogFormVisibleInstruction = false
      this.list.forEach((v) => {
        if (v.feuipmentid === this.dataForm.feuipmentid) {
          this.dataForm = this.listTmp
          this.dataForm.detailList = this.detailsTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    // 弹窗点击关闭前的回调
    handleCloseParameter() {
      this.indexs = 1
      this.dialogFormVisibleParameter = false
      this.list.forEach((v) => {
        if (v.feuipmentid === this.dataForm.feuipmentid) {
          this.dataForm = this.listTmp
          this.dataForm.paraList = this.parasTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.indexs = 1
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.feuipmentid === this.dataForm.feuipmentid) {
          this.dataForm = this.listTmp
          this.dataForm.detailList = this.detailsTmp
          this.dataForm.paraList = this.parasTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    cancel() {
      this.indexs = 1
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.feuipmentid === this.dataForm.feuipmentid) {
          this.dataForm = this.listTmp
          this.dataForm.detailList = this.detailsTmp
          this.dataForm.paraList = this.parasTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        fequipmentno: undefined,
        fequipmentname: undefined,
        fclassstno: undefined,
        funit: undefined,
        fbrand: undefined,
        fspec: undefined,
        fuseyear: undefined,
        fimage: undefined,
        fequipmenttype: undefined,
        fpanel: undefined,
        fbarcode: undefined,
        fbuyprice: undefined,
        fupddate: undefined,
        foperator: undefined,
        flowvoltage: undefined,
        fheightvoltage: undefined,
        felccurrent: undefined,
        fordday: undefined,
        id: undefined,
        detailList: [],
        paraList: [],
        netWeight: '',
      }
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      if (this.getListfclassstno.length > 0) {
        this.dataForm.fclassstno = this.getListfclassstno[0].value
      }
      if (this.getListfequipmenttype.length > 0) {
        this.dataForm.fequipmenttype = this.getListfequipmenttype[0].value
        eqtActions(this.getListfequipmenttype[0].value)
          .then(response => {
            this.getListfaction = response.data.data.list
          })
          .catch(() => {
            this.getListfaction = []
          })
      }
      if (this.siteTypeList.length > 0) {
        this.dataForm.fpanel = this.siteTypeList[0].value
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.resetForm1();
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          createinfo(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备资料成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    saveEquipmentCodes3() {
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      // this.dataForm.foperator = this.$store.state.user.id
      // this.dataForm.fupddate = new Date()
      saveEquipmentCodes3({ brand_cn: this.dataForm.fbrand, fdictname: this.formatfequipmenttype2(this.dataForm.fequipmenttype), model: this.dataForm.fspec, fdictno: this.dataForm.fequipmenttype })
        .then((response) => {
          this.list.unshift(response.data.data)
          this.dialogFormVisible = false
          this.$notify.success({
            title: '成功',
            message: '生成设备指令成功'
          })
        })
        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response
          })
        })
      //   }
      // })
    },
    //图片
    formdata2: function (feuipmentid) {
      // const formdata = new FormData()
      // formdata.append('fpointno', '123456')
      return { 'ftype': '5', 'feuipmentid': feuipmentid }
    },
    handleAvatarSuccess(res, file) {
      // this.dataForm.fimage = URL.createObjectURL(file.raw)
      this.dataForm.fimage = res.data
      const time = new Date().getTime()
      this.dataForm.fimage = `${this.dataForm.fimage}?time=${time}`
    },

    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M // isJPG &&
    },

    //*图片

    handleUpdate(row) {
      this.handleRemove()
      this.dataForm = Object.assign({}, row)
      eqtActions(row.fequipmenttype)
        .then(response => {
          this.getListfaction = response.data.data.list
        })
        .catch(() => {
          this.getListfaction = []
        })
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.listTmp = row

      // this.detailsTmp = []
      // row.detailList.forEach((v) => {
      //   this.detailsTmp.push(v)
      // })
      // this.parasTmp = []
      // row.paraList.forEach((v) => {
      //   this.parasTmp.push(v)
      // })
      // var end = row.paraList[row.paraList.length - 1]
      // this.indexs = end.fline + 1;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.resetForm1();
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updateinfo(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.feuipmentid === this.dataForm.feuipmentid) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备资料成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除设备资料', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteinfo(row)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除设备资料成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response
            })
          })
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>